<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div *ngIf="device" class="card">
    <div class="card-header font-weight-bold">
        <i class="fa fa-edit text-danger fa-lg"></i> 
        <span class="mx-2">Edit Device</span>
        <span class="text-primary">{{device.name}}</span> 
    </div>
    <div class="card-header py-1">
        <button type="button" class="btn btn-success" (click)="save()"  [disabled]="validateBeforeSave()">
            <span><i class="fa fa-save mr-1"></i>Save</span>
        </button>
    </div>
    <div class="card-body">
        <div class="card mb-3">
            <div class="card-header font-weight-bold">
                <i class="fa fa-tags fa-lg text-danger"></i> Device Primary
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">DeviceName</label>
                        <div class="col-md-10">
                            <input type="text" name="name" [(ngModel)]="device.name" [class.is-invalid]="device.name === ''" class="form-control" required>
                            <div class="invalid-feedback">
                               device name can't not be empty!
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Description</label>
                        <div class="col-md-10">
                            <input type="text" name="description" [(ngModel)]="device.description" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Labels</label>
                        <div class="col-md-10">
                            <input type="text" name="labels" [(ngModel)]="deviceLabels"  class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="adminState" class="col-md-2 col-form-label" >AdminState</label>
                        <div class="col-md-10">
                            <select class="custom-select"  name="adminState" [(ngModel)]="device.adminState">
                                <option value="UNLOCKED">UNLOCKED</option>
                                <option value="LOCKED">LOCKED</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="operatingState" class="col-md-2 col-form-label" >OperatingState</label>
                        <div class="col-md-10">
                            <select class="custom-select" name="operatingState" [(ngModel)]="device.operatingState">
                                <option value="UP">UP</option>
                                <option value="DOWN">DOWN</option>
                                <option value="DOWN">UNKNOWN</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="mb-3">
            <app-device-service-list 
            (singleDeviceSvcSelectedEvent)="onSingleDeviceSvcSelected($event)" 
            [deviceSvcSelected]="selectedSvc"></app-device-service-list>
        </div>

        <div class="mb-3">
            <app-device-profile-list  
            (singleProfileSelectedEvent)="onSingleProfileSelected($event)" 
            [enableSelectAll]="false" [toolbars]="false" 
            [singleProfileSelected]="selectedProfile"
            [associatedDeviceColumn]="false"></app-device-profile-list>
        </div>

        <div class="card mb-3">
            <div class="card-header font-weight-bold">
                <i class="fa fa-tags fa-lg text-danger"></i> Device Protocol
            </div>
            <div class="card-body">
                <div class="card">
                    <div class="card-body">
                        <div class="row ">
                            <div class="col-md-2 col-lg-2 border-right border-secondary">
                                <div class="form-group">
                                    <label>Protocol Name</label>
                                    <input type="text" class="form-control" [class.is-invalid]="!protocolName" [class.is-valid]="protocolName" name="protocolName" [(ngModel)]="protocolName">
                                    <div class="invalid-feedback">
                                        <small>the protocol name can't be empty!</small> 
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10 col-lg-10">
                                <div>
                                    <p class="badge badge-secondary font-weight-bold">
                                        <span class="fa fa-plus-circle mr-2"></span>
                                        <span class="user-select-none" role="button" (click)="addProtocolProperty()">Add Protocol Property</span>
                                        
                                    </p>
                                </div>
    
                                <div *ngFor="let property of protocolPropertyList">
                                    <form class="form-inline mb-1">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">PropertyKey</span>
                                            </div>
                                            <input type="text" class="form-control" name="propertyKey" [(ngModel)]="property.key" style="width: 300px;">
                                        </div>
                                        <div class="form-group mx-2">
                                            <i class="fa fa-long-arrow-right"></i> 
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">PropertyValue</span>
                                            </div>
                                            <input type="text" class="form-control" name="PropertyValue" [(ngModel)]="property.value" style="width: 300px;">
                                        </div>
                                        <div class="input-group ml-2">
                                            <button class="btn btn-danger btn-sm" (click)="removeProtocolProperty(property)"> <i class="fa fa-trash"></i> </button>
                                        </div>
                                    </form>
                                </div>
    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header font-weight-bold">
                <i class="fa fa-tags fa-lg text-danger"></i>  AutoEvents
            </div>
            <div class="card-body">
                <p class="badge badge-secondary font-weight-bold">
                    <span class="fa fa-plus-circle mr-2"></span>
                    <span class="user-select-none" role="button" (click)="addAutoEvent()">Add More AutoEvent</span>
                </p>
                <div class="card mb-3" *ngFor="let event of autoEventsInternal">
                    <div class="card-body">
                        <form>
                            <div class="form-group row has-validation">
                                <label class="col-md-2 col-form-label">Interval</label>
                                <div class="col-md-10">
                                    <div class="input-group mb-3"  style="width: 250px;">
                                        <input type="text" name="interval" [(ngModel)]="event.interval" [class.is-invalid]="!eventIntervalNumType(event.interval)" [class.is-valid]="eventIntervalNumType(event.interval)" class="form-control" required>
                                        <div class="input-group-append">
                                            <select class="custom-select" name="eventIntervalUnit" [(ngModel)]="event.unit" required>
                                                <option value="ms">millisecond</option>
                                                <option value="s">second</option>
                                                <option value="m">minute</option>
                                                <option value="h">hour</option>
                                            </select>
                                        </div>
                                        <div class="invalid-feedback">
                                            can only be a pure integer number
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">onchange</label>
                                <div class="col-md-10">
                                    <select class="custom-select" name="onchange" [(ngModel)]="event.onChange" style="width: 250px;">
                                        <option value="true">true</option>
                                        <option value="false">false</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">resource</label>
                                <div class="col-md-10">
                                    <select class="custom-select" name="resource" [(ngModel)]="event.resource" [class.is-invalid]="event.resource === ''" [class.is-valid]="event.resource !==''"  style="width: 250px;" required>
                                        <option *ngFor="let r of autoEventResourceNameSet" value="{{r}}">{{r}}</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        resource can't be empty
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-danger btn-sm" (click)="removeAutoEvent(event)"><i class="fa fa-trash"></i> Remove</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>